import React, { useState, useTransition } from "react";

// 当改变数据的开销比较大的时候，数据改变的时间比较长
// 可以使用useTransition配合自己写的loading组件，来提高用户的体验
const Loading = () => {
  return <div>loading...</div>;
};

const App = () => {
  const [count, setCount] = useState(1);
  const [isPending, startTransition] = useTransition();

  const fn = () => {
    startTransition(() => {
      setCount((v) => v + 1);
    });
  };

  return (
    <>
      <h2>useTransition</h2>
      {isPending && <Loading />}
      <p>count: {count}</p>
      <button onClick={fn}>btn</button>
    </>
  );
};

export default App;
